import React, { Component } from 'react';
import { Link, useParams, useSearchParams } from 'react-router-dom';


// useParams获取在路由时/:id这种的参数
// useParams不能在类对象中直接调用，所以要稍微暗度陈仓一下
// class WebContent extends Component {
//     state = {  } 
//     render() { 
//         console.log(this.props.params);
//         return (<h1>Web Content</h1>);
//     }
// }
 
// export default (props) => (
//     <WebContent 
//         {...props}
//         params={useParams()}
//     />
// );

// 无状态函数
// const WebContent = () => {
//     let params = useParams();
//     console.log(useParams());
//     return ( 
//         <React.Fragment>
//             <h1>Web Content {params.id}</h1> 
//             <hr />
//             <button className='btn btn-info'><Link to='/web' style={{textDecoration: "none", color:"white"}}>上一页</Link></button>
//         </React.Fragment>
//     );
// }
 
// export default WebContent;

// useSearchParams用于获取?后的参数
// const WebContent = () => {
//     const [searchParams, setSearchParams] = useSearchParams();
//     console.log(searchParams);
//     return ( 
//         <React.Fragment>
//             <h1>Web Content {searchParams.get('id')}</h1> 
//             <hr />
//             <button className='btn btn-info'><Link to='/web' style={{textDecoration: "none", color:"white"}}>上一页</Link></button>
//         </React.Fragment>
//     );
// }
 
// export default WebContent;

class WebContent extends Component {
    state = { 
        searchParams: this.props.params[0],
        setSearchParams: this.props.params[1],
    } 

    ClickHandle = () => {
        this.state.setSearchParams({
            type: "doc",
            id: "-1",
            name: "baichen"
        })
    }

    render() { 
        console.log(this.state.searchParams)
        return (
            <React.Fragment>
             <h1>Web Content {this.state.searchParams.get('id')}</h1> 
             <button className='btn btn-warning' onClick={this.ClickHandle}>setSearchParams</button>
             <hr />
             <button className='btn btn-info'><Link to='/web' style={{textDecoration: "none", color:"white"}}>上一页</Link></button>
         </React.Fragment>
        );
    }
}
 
export default (props) => (
    <WebContent 
        {...props}
        params={useSearchParams()}
    />
);